<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view locale="#{salaoMB.internacionalizacao.currentLocale}">
<h:head>
	<title>Novo usuário</title>
</h:head>
<h:body>
	
		<h:form id="incluirUsuario" prependId="false">
		
		<table width="45%" align="center">
			<tr>
				<td>
					<p:growl id="growl" showDetail="true" sticky="true" />
					<p:panel header="Cadastre-se" cellpadding="5">
						
						<p:panel header="Informações Pessoais" cellpadding="5">
						<table border="0">
							<tr>
								<td><h:outputText id="nome" value="Nome: " />
								</td>
								<td><p:inputText value="#{usuarioMB.usuario.nome}"
										maxlength="20" size="30" id="nomeUsuario" />
								</td>
							</tr>
							<tr>
								<td><h:outputText id="sobrenome" value="Sobrenome: " />
								</td>
								<td><p:inputText value="#{usuarioMB.usuario.sobrenome}"
										maxlength="40" size="30" id="sobrenomeUsuario" /> 
								</td>
							</tr>
							<tr>
								<td><h:outputText id="rg" value="RG: " />
								</td>
								<td><p:inputMask value="#{usuarioMB.usuario.rg}"
										maxlength="15" size="30" mask="99.999.999-9" id="rgUsuario" />
								</td>
							</tr>
							<tr>
								<td><h:outputText id="cpf" value="CPF: " />
								</td>
								<td><p:inputMask value="#{usuarioMB.usuario.cpf}"
										maxlength="15" size="30" mask="999.999.999-99" id="cpfUsuario" />
								</td>
							</tr>
							<tr>
								<td><h:outputText id="email" value="Email: " />
								</td>
								<td><p:inputText value="#{usuarioMB.usuario.email}"
										size="30" id="emailUsuario" >
										<f:validator validatorId="valida"/>
									</p:inputText>	
								</td>
							</tr>
							<tr>
								<td><h:outputText id="telefone" value="Telefone: " />
								</td>
								<td>
								<h:panelGroup>
								<p:inputMask value="#{usuarioMB.usuario.ddd1}"
										maxlength="2" size="2" id="ddd1_telefoneUsuario" />
								<p:inputMask value="#{usuarioMB.usuario.telefone}"
										maxlength="8" size="26" id="telefoneUsuario" />
								</h:panelGroup>
								</td>
							</tr>
							<tr>
								<td><h:outputText id="celular" value="Celular: " />
								</td>
								<td>
								<h:panelGroup>
								<p:inputMask value="#{usuarioMB.usuario.ddd2}"
										maxlength="2" size="2" id="ddd2_telefoneUsuario" />
								<p:inputMask value="#{usuarioMB.usuario.celular}"
										maxlength="9" size="26" id="celularUsuario" />
								</h:panelGroup>		
								</td>
							</tr>
							
							<tr>
								<td><h:outputText id="sexo" value="Sexo: " />
								</td>
								<td><h:selectOneRadio id="selectSexo" value="#{usuarioMB.usuario.sexo}"
										layout="pageDirection">
										<f:selectItem itemLabel="Feminino" id="Female" itemValue="F" />
										<f:selectItem itemLabel="Masculino" id="Male" itemValue="M" />
									</h:selectOneRadio></td>
							</tr>
							<tr>
								<td><h:outputText id="dataNascimento"
										value="Data de Nascimento: (DD/MM/YY)" />
								</td>
								<td><p:calendar id="calendar" showOn="button"
										value="#{usuarioMB.usuario.dataNasc}" navigator="true"
										yearRange="1920">
									</p:calendar>
								</td>
							</tr>							
						</table>						
						</p:panel>
						<p:panel header="Dados de Acesso" cellpadding="5">
						<table>
							<tr>
								<td><h:outputText id="login" value="Login: " />
								</td>
								<td><p:inputText value="#{usuarioMB.newLogin.login}"
										maxlength="30" size="30" id="loginUsuario" />
								</td>
							</tr>
							<tr>
								<td><h:outputText id="senha" value="Senha: " />
								</td>
								<td><p:password id="feedback"
										value="#{usuarioMB.newLogin.senha}" feedback="true" title="Máximo 20 caracteres"
										maxlength="20" size="30" /></td>
							</tr>
							<tr>
								<td><h:outputText id="csenha" value="Confirme a senha: " />
								</td>
								<td><p:password value="#{usuarioMB.csenha}" maxlength="20" size="30" />
									<div id="msg"></div></td>
							</tr>
						</table>
						</p:panel>
						<p:panel header="Endereço" cellpadding="5">
						<table>
						<tr>
								<td><h:outputText id="pais" value="Pa&iacute;s: " />
								</td>
								<td>
						        <h:selectOneMenu value="#{usuarioMB.idSelectedPais}" id="paises" >							        
						          <f:selectItem itemLabel="Selecione..." itemValue="0"/>			
							      <f:selectItems value="#{usuarioMB.mapPaises}" var="pais" itemLabel="#{pais.nome}" itemValue="{pais.id}" />	
							      <p:ajax update="comboEstado" listener="#{usuarioMB.localizarEstadoByIdPais}" />						   		
							    </h:selectOneMenu>  
								</td>
							</tr>
							<tr>
								<td><h:outputText id="estado" value="Estado: " />
								</td>
								<td>
								<h:selectOneMenu value="#{usuarioMB.idSelectedEstado}" rendered="true" immediate="true" id="comboEstado" >				
							      <f:selectItems value="#{usuarioMB.mapEstados}" var="estado" itemValue="#{estado.id}" itemLabel="#{estado.nome}" />
							     </h:selectOneMenu>
							       </td>
							</tr>
							<tr>
								<td>							
								<h:outputText id="textCidade" value="Cidade: " />
								</td>
								<td>
							    <p:inputText id="cidade" value="#{usuarioMB.selectedCidade}" maxlength="20" size="30" />    								
								</td>
							</tr>		
							<tr>
								<td><h:outputText id="bairro" value="Bairro: " />
								</td>
								<td><p:inputText
										value="#{usuarioMB.selectedBairro}"
										maxlength="20" size="30" id="bairroUsuario" />
								</td>
							</tr>
							<tr>							
								<td><h:outputText id="cep" value="CEP: " />
								</td>
								<td><p:inputText value="#{usuarioMB.usuario.endereco.cep}"
										maxlength="10" size="30" id="cepUsuario"  />
								</td>
							</tr>
							<tr>
								<td><h:outputText id="endereco" value="Logradouro: " />
								</td>
								<td>
									<table>
										<tr>
											<td><p:inputText
													value="#{usuarioMB.usuario.endereco.logradouro}"
													maxlength="50" size="50" id="logradouro"  />
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td> <h:outputText id="textNumero" value="Nº: " />
								</td>
								<td>
										<p:inputText value="#{usuarioMB.usuario.endereco.numero}" maxlength="6"
															size="10" id="numero" />
								</td>								
							</tr>													
						</table>
						</p:panel>	
						<table align="center">
							<tr>
								<td align="center"><h:commandButton type="reset" id="usuarioBotaoLimpar" value="#{msg.limpar}"
										icon="ui-icon-close" />
								</td>
								<td align="center"><h:commandButton type="submit" id="usuarioBotaoSalvar"
										actionListener="#{usuarioMB.incluir}" value="#{msg.confirmar}"
										icon="ui-icon-disk" update="growl,incluirUsuario"/>
								</td>
							</tr>
						</table>
					</p:panel></td>
			</tr>
		</table>
	</h:form>
</h:body>
</f:view>
</html>